<template>
  <div class="train-list-box">
    <search class="search-section" placeholder="请输入名称" v-model="searchValue" @search="onSearch" />
    <div class="list">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-list class="list-container"
          v-model="moreLoading"
          :finished="moreFinished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad">
          <div >
            <template v-for="item in list">
                <train-item class="list-item" :key="item.id" :item-data="item"></train-item>
            </template>
            <!-- <empty-data :empty="list.length === 0 && !moreLoading"></empty-data> -->
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Search from '@/components/Search'
import TrainItem from './TrainItem'
import { API_TRAIN_LIST } from '@/service/train'
export default {
  components: { Search, TrainItem },
  props: ['public'],
  data () {
    return {
      pageSize: 8,
      searchValue: '',
      pageNum: 0,
      refreshLoading: false,
      moreLoading: false,
      moreFinished: false,
      searchLoading: false,
      searchState: false,
      list: []
    }
  },
  mounted () {
    this.requestList(resData => {
      this.list = resData.info.resultList
    })
  },
  computed: {
    reqData () {
      return {
        isPublic: this.public,
        nameLike: this.searchState ? this.searchValue : '',
        pageNum: this.pageNum + 1,
        pageSize: this.pageSize
      }
    }
  },
  watch: {
    searchValue (newValue) {
      if (!newValue) {
        this.searchState = false
      }
    }
  },
  methods: {
    requestList (callback) {
      return API_TRAIN_LIST(this.reqData).then(resData => {
        let { resultList, totalSize } = resData.info
        if (resultList.length === 0) {
          this.moreFinished = true
        } else {
          this.pageNum = this.pageNum + 1
          callback && callback(resData)
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      })
    },
    // 免费刷新
    onRefresh () {
      this.pageNum = 0
      API_TRAIN_LIST(this.reqData).then(resData => {
        let { resultList, totalSize } = resData.info
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNum = this.pageNum + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      }).finally(() => {
        this.refreshLoading = false
      })
    },
    onLoad () {
      if (this.refreshLoading || this.searchLoading) {
        this.moreLoading = false
        return
      }
      this.requestList((resData) => {
        let { resultList } = resData.info
        this.list = [...this.list, ...resultList]
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onSearch () {
      if (!this.searchValue) return
      this.searchLoading = true
      this.searchState = true
      this.pageNum = 0
      API_TRAIN_LIST(this.reqData).then(resData => {
        let { resultList, totalSize } = resData.info
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNum = this.pageNum + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      })
    }
  }
}
</script>

<style scoped lang="less">
.train-list-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.list{
  flex: 1;
  overflow: auto;
}
</style>
